<template>
  <el-container>
    <div class="login-container">

      <el-form :model="ruleForm2" :rules="rules2"
               status-icon
               ref="ruleForm2"
               label-position="left"
               label-width="0px"
               class="demo-ruleForm login-page">
        <div class="my-bootm">
          <el-button type="primary" @click="register">注册</el-button>
          <el-button type="primary" @click="login">登录</el-button>
        </div>

        <el-form-item prop="username">
          <el-input type="text"
                    v-model="ruleForm2.username"
                    auto-complete="off"
                    placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model="ruleForm2.pwd"
                    auto-complete="off"
                    placeholder="密码"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password" v-if="loginOrRegister">
          <el-input type="password"
                    v-model="ruleForm2.rpwd"
                    auto-complete="off"
                    placeholder="确认密码"
          ></el-input>
        </el-form-item>
        <el-checkbox
          v-model="checked"
          class="rememberme"
          v-if="!loginOrRegister"
        >记住密码
        </el-checkbox>
        <el-form-item class="my-put">
          <el-button type="primary" class="my-put" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        loginOrRegister: false,  // 注册还是登录 false:登录  true：注册

        ruleForm2: {
          username: '',
          pwd: '',
          rpwd: ''
        },
        rules2: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
          ],
          rpwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
          ],
        },
        checked: false
      }
    },

    created() {
      this.getLoginStatus()
    },

    methods: {
      // 注册
      register() {
        this.loginOrRegister = true
      },

      // 登录
      login() {
        this.loginOrRegister = false
      },
      getLoginStatus() {
        if (this.loginStatus) {
          this.$router.push({path: '/'});
        }
      },

      handleSubmit(event) {
        // let login_status = JSON.stringify(this.userInfo);
        if (this.userInfo && this.userInfo.access_token) {
          this.$router.push({path: '/'});
        } else {
          let rlStatus = true; // 是否校验通过
          let URL = this.$http.loginUrl; // 默认登录URL
          if (this.loginOrRegister) {  // 状态为注册时
            URL = this.$http.registerUrl;  // 注册URL
            if (!(this.pwd === this.rpwd)) {
              rlStatus = false;
              this.$alert('两次密码不一致', '提示', {
                confirmButtonText: '确定'
              })
            }
          }
          // 校验通过
          if (rlStatus) {
            this.ruleForm2.pwd = this.$myTool.pwdMd(this.ruleForm2.pwd);
            this.$http.getApiFunc(this.$http.addApiStatus)(URL, this.ruleForm2)
              .then(res => {
                this.$alert(res.data.msg, '提示', {
                  confirmButtonText: '确定'
                });
                if (!res.data.status) {
                  this.ruleForm2.username = '';
                  this.ruleForm2.pwd = '';
                  this.ruleForm2.rpwd = '';
                  let obj = JSON.stringify(res.data.data);
                  localStorage.setItem('userInfo', obj);
                  this.$store.dispatch('getUserInfo', res.data.data);
                  this.$router.push({path: '/'});
                }
              })
              .catch(err => {
                console.log(err);
              })
          }
        }
      }
    },

    computed: {
      loginStatus() {
        let isShow = false;
        if (this.$store.state.userInfo) {
          if (this.$store.state.userInfo.access_token) {
            isShow = true;
          }
        }
        return isShow
      },

      userInfo() {
        return this.$store.state.userInfo
      }
    }

  };
</script>

<style scoped>
  .my-bootm {
    margin-bottom: 10px;
  }

  .my-put {
    width: 100%;
  }

  .login-container {
    width: 100%;
    height: 100%;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  }
</style>
